<template>
  <nav-bar text-center title="邀请记录" />
  <view class="title">
    共计邀请: <text class="count">{{ total }}人</text>
  </view>
  <view class="list">
    <view class="list_item flex_a_c" v-for="item in list" :key="item.id">
      <view class="cover">
        <image mode="aspectFill" class="profile_photo" :src="item.headOssUrl"></image>
      </view>
      <view class="nick_name">{{ item.userName }}</view>
      <view class="mobile">{{ item.mobile }}</view>
      <view class="create_time">{{ item.createTime }}</view>
    </view>
    <van-empty v-if="total === 0" class="pt-60" image="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/empty.png"
      description="暂无邀请" />
    <view v-if="total && total === list.length" class="all_tip">到底了</view>
  </view>
</template>
<script setup>
import { reactive, toRefs, onBeforeMount } from  'vue'
import { getInviteList } from "@/api/center"
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app'
onBeforeMount(() => {
	fnGet()
})
let info = reactive({
  query: {
    type: 1,
    pageCode: 1,
    pageSize: 20
  },
  list: [],
  total: ''
})
let fnGet = async () => {
  const { code, data } = await getInviteList(info.query)
  if (code === 200) {
    info.list = info.list.concat(data.rows)
		info.total = data.total
  }
}
onReachBottom(() => {
	if (info.total > info.list.length) {
		++info.query.pageCode
		fnGet()
	}
})
let { list, query, total } = toRefs(info)

</script>

<style lang="scss" scoped>
.title {
  height: 88rpx;
  line-height: 88rpx;
  padding-left: 30rpx;
  font-weight: 500;
  font-size: 28rpx;
  background: #fff;
  margin-bottom: 2rpx;
  color: #000000;
  .count {
    color: #CC0000;
  }
}
.list {
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  .list_item {
    padding-left: 28rpx;
    background: #FFFFFF;
    margin-bottom: 2rpx;
    height: 120rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    font-family: pf_regular;
    .cover {
      width: 66rpx;
      height: 66rpx;
      margin-right: 10rpx;
      position: relative;
      background: url(https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/avatar_bg.png) no-repeat left top / cover;
      .profile_photo {
        width: 60rpx;
        height: 60rpx;
        border-radius: 60rpx;
        position: absolute;
        left: 50%;
        bottom: 6rpx;
        transform: translateX(-50%);
      }
    }
    .nick_name {
      font-family: pf_mudium;

      width: 168rpx;
      height: 40rpx;
      overflow: hidden;
      padding-right: 20rpx;
      font-weight: 500;
      color: #333333;
    }
    .mobile {
      letter-spacing: -1rpx;
      margin-right: 38rpx;
    }
    .create_time {
      letter-spacing: -3rpx;
    }
  }
}
</style>